﻿<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <style>
    #container{width:500px; height:500px;}
    </style>
</head>
<body onload="init()">

<div id="container"></div>
<div id="centerDiv"></div>
<script type="text/javascript">
    function init() {

        //div容器
        var container = document.getElementById("container");
        var centerDiv = document.getElementById("centerDiv");

        //初始化地图
        var map = new qq.maps.Map(container, {
            // 地图的中心地理坐标
            center: new qq.maps.LatLng(34.916527, 113.397128),
            zoom: 13
        });
        //创建自定义控件

        var middleControl = document.createElement("div");
        middleControl.style.left = "233px";
        middleControl.style.top = "215px";
        middleControl.style.position = "relative";
        middleControl.style.width = "36px";
        middleControl.style.height = "36px";
        middleControl.style.zIndex = "100000";
        middleControl.innerHTML = '<img src="https://www.cdlhome.com.sg/mobile_assets/images/icon-location.png" />';
        document.getElementById("container").appendChild(middleControl);
        //返回地图当前中心点地理坐标
        centerDiv.innerHTML = "latlng:" + map.getCenter();
        //当地图中心属性更改时触发事件
        qq.maps.event.addListener(map, 'dragend', function () {
            centerDiv.innerHTML = "latlng:" + map.getCenter();
        });
    }
    </script>
</body>
